<template>
  <div>
    <div>
      <van-search
        shape="round"
        v-model="value"
        placeholder="请输入小区或地址"
        show-action
      >
        <template #label>
          <span class="city" @click="$router.push('/city')">{{
            city.label
          }}</span>
        </template>
        <template #action
          ><van-icon name="location-o" size="25" @click="$router.push('/ditu')"
        /></template>
      </van-search>
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="item in images" :key="item.id">
          <van-image
            fit="cover"
            :src="'http://liufusong.top:8080' + item.imgSrc"
        /></van-swipe-item>
      </van-swipe>
    </div>
    <van-grid>
      <van-grid-item icon="wap-home-o" text="整租" />
      <van-grid-item icon="home-o" text="合租" />
      <van-grid-item icon="shop-o" text="地铁找房" />
      <van-grid-item icon="back-top" text="去出租" />
    </van-grid>
    <div class="title">
      <h3>租房小组</h3>
      <a href="">更多</a>
    </div>
    <van-grid
      direction="horizontal"
      :column-num="2"
      :gutter="10"
      :clickable="true"
    >
      <van-grid-item
        :icon="'http://liufusong.top:8080' + item.imgSrc"
        v-for="item in house"
        :key="item.id"
      >
        <template #text
          ><div>
            <p>{{ item.desc }}</p>
            <p>{{ item.title }}</p>
          </div></template
        >
      </van-grid-item>
    </van-grid>
  </div>
</template>

<script>
import { register, zufang } from '@/api/article'
export default {
  name: 'MyArticle',
  components: {},
  props: {},
  data() {
    return {
      value: '',
      images: [],
      house: [],
      city: JSON.parse(window.localStorage.getItem('city')) || {
        label: '上海',
        value: 'AREA|dbf46d32-7e76-1196',
        pinyin: 'shanghai',
        short: 'sh'
      }
    }
  },
  computed: {},
  watch: {},
  async created() {
    const res = await register()
    // console.log(res.body)
    this.images = res.body
    const zu = await zufang()
    this.house = zu.body
    // console.log(zu.body)
  },
  methods: {}
}
</script>

<style scoped lang="less">
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  // line-height: 150px;
  text-align: center;
  // background-color: #39a9ed;
}
.title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 20px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.van-search {
  position: absolute;
  top: 8px;
  left: 40px;
  background: rgba(255, 255, 255, 0);
  z-index: 99;
}
</style>
